/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    Image,
    ScrollView,
    TouchableOpacity,
    ListView,
    RefreshControl
} from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import Global from "../Commom/GlobalConst";
import RuralAPIService from "../Commom/RuralAPIService";
import Toast from '../Utils/toast';
import TravelsDetails from './TravelsDetails';

import ScrollableTabView, {
    DefaultTabBar,
    ScrollableTabBar
} from 'react-native-scrollable-tab-view';
import StrategyDetailPage from '../Components/StrategyDetailPage';
export default class ListTravelPage extends Component {
    constructor(props) {
        super(props);
        var dataSourceData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceDataOne = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSourceListOne: dataSourceDataOne,
            dataSourceList: dataSourceData,
            aboutWithImage:[{image:require('../../Image/new/image_01.png')},
                {image:require('../../Image/new/image_02.png')},
                {image:require('../../Image/new/image_03.png')}],
            record_count_two:1,
            page_two: 1,
            dataList:[],
            isRefreshing_two:false,
            record_count_one:1,
            page_one: 1,
            dataListOne:[],
            isRefreshing_one:false
        }
    }
    componentDidMount() {
        this.onRefreshDataTwo();
        this.onRefreshDataOne();
    }
    BackAction() {
        this.props.navigator.pop();
    }
    onRefreshDataOne(){
        RuralAPIService.StrategyList(1).then((ret)=> {
            this.setState({
                dataListOne:ret.result,
                page_one:ret.page,
                record_count_one:ret.record_count,
                isRefreshing_one: false,
            })
        }).catch((err)=> {
        });
    }
    onRefreshDataTwo(){
        RuralAPIService.TravelList(1).then((ret)=> {
            this.setState({
                dataList:ret.result,
                page_two:ret.page,
                record_count_two:ret.record_count,
                isRefreshing_two: false,
            })
        }).catch((err)=> {
        });
    }
    loadMoreDataOne(){
        if (this.state.page_one < this.state.record_count_one) {
            this.setState({
                isRefreshing_one: true,
            });
            RuralAPIService.StrategyList(this.state.page + 1).then((ret)=> {
                this.setState({
                    dataListOne:this.state.dataListOne.concat(ret.result),
                    page_one:ret.page,
                    record_count_one:ret.record_count,
                    isRefreshing_one: false,
                })
            }).catch((err)=> {
            });
        } else {
            if (this.state.page_one != 1) {
                Toast.show('木有更多数据');
            }
        }
    }
    loadMoreDataTwo(){
        if (this.state.page_two < this.state.record_count_two) {
            this.setState({
                isRefreshing_two: true,
            });
            RuralAPIService.TravelList(this.state.page_two + 1).then((ret)=> {
                this.setState({
                    dataList:this.state.dataList.concat(ret.result),
                    page_two:ret.page,
                    record_count_two:ret.record_count,
                    isRefreshing_two: false,
                })
            }).catch((err)=> {
            });
        } else {
            if (this.state.page_two != 1) {
                Toast.show('木有更多数据');
            }
        }
    }
    travelDetail(id){
        this.props.navigator.push({
            id: 'TravelsDetails',
            component: TravelsDetails,
            passProps: {
                ID:id
            }
        });
    }
    goStrategyPage(id){
        this.props.navigator.push({
            id: 'StrategyDetailPage',
            component: StrategyDetailPage,
            passProps: {
                ID:id
            }
        });
    }
    ListDataRowOne(rowData){
        return(
            <TouchableOpacity activeOpacity={0.5}
                              onPress={()=>this.goStrategyPage(rowData.id)} >
                <View style={{width:width-20,height:180,marginLeft:10,borderRadius:5,backgroundColor:'white',marginTop:15}}>
                    <Image style={{width:width-20,height:180,resizeMode:'cover',borderRadius:5}}
                           source={{uri:rowData.backgroundimage}}/>
                    <View style={{position: 'absolute',left:0,bottom:0,backgroundColor:'rgba(0,0,0,0.5)',width:width-20,height:30,justifyContent:'center',borderBottomLeftRadius:5,borderBottomRightRadius:5}}>
                        <Text style={{color:'white',marginLeft:8}}>{rowData.title}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    ListDataRowTwo(rowData){
        return(
            <TouchableOpacity activeOpacity={0.5}
                              onPress={()=>  this.travelDetail(rowData.id)}>
                <View style={{ backgroundColor: 'white',padding: 10,flexDirection: 'row',alignItems: 'center',marginTop: 10,}}>
                    {rowData.images.length>0? <Image style={{width:120,height: 90,marginRight: 10,}} source={{uri:rowData.images[0]}}/>:null}
                    <View style={{width:width-140,height: 90}}>
                        <Text numberOfLines={2} style={{fontSize: 15,color: Global.FontColor.DimGray,lineHeight: 20,height: 45,marginTop:2}}>{rowData.content}</Text>
                        <Text numberOfLines={1} style={{position: 'absolute',left:0,bottom:2,fontSize: 13,color: Global.FontColor.LightGrey}}>{rowData.time}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        return (
        <View style={styles.container}>
            <View style={{width,height:64,backgroundColor:'#24CD78',flexDirection:'row',justifyContent:'space-between',paddingTop:20,alignItems:'center'}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.BackAction()}>
                    <View style={{flexDirection:'row',width:40,height:40,marginLeft:10,alignItems:'center',}}>
                        <Image style={{width:17,height:17,resizeMode:'contain',marginLeft:3}}
                               source={require('../../Image/back_icon_white.png')}/>
                    </View>
                </TouchableOpacity>
                <Text style={{color:'white',fontSize:19}}>攻略游记</Text>
                <View style={{flexDirection:'row',width:40,height:40,marginRight:10,justifyContent:'flex-end',alignItems:'center'}}>
                </View>
            </View>
            <View
                style={{backgroundColor:Global.Const.transparent,flex:1,borderTopWidth:2,borderColor:Global.Const.transparent}}>
                <ScrollableTabView
                    renderTabBar={
                        () => <DefaultTabBar
                            textStyle={{ fontSize: 15,marginTop: 8}}
                            style={{height:40,borderBottomColor: '#F5F5F5',backgroundColor:'white'}}/>}
                    tabBarUnderlineStyle={{backgroundColor: '#24CD78',height:3}}
                    tabBarUnderlineColor={'#FF0000'}
                    tabBarActiveTextColor={'#24CD78'}
                    tabBarInactiveTextColor={'#333333'}
                    tabBarPosition='top'>
                    <View tabLabel="攻略">
                        <ListView
                            style={{height:Global.Const.size.height-105}}
                            refreshControl={
                                <RefreshControl
                                    refreshing={this.state.isRefreshing_one}
                                    onRefresh={() => {this.onRefreshDataOne()}}
                                    colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                    progressBackgroundColor="white"
                                /> }
                            onEndReachedThreshold={50}
                            onEndReached={() => {this.loadMoreDataOne()}}
                            initialListSize={1}
                            enableEmptySections={true}
                            dataSource={this.state.dataSourceListOne.cloneWithRows(this.state.dataListOne)}
                            renderRow={(rowData)=>this.ListDataRowOne(rowData)}
                        />
                    </View>
                    <View tabLabel="游记">
                        <ListView
                            style={{height:Global.Const.size.height-105}}
                            refreshControl={
                                <RefreshControl
                                    refreshing={this.state.isRefreshing_two}
                                    onRefresh={() => {this.onRefreshDataTwo()}}
                                    colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                    progressBackgroundColor="white"
                                /> }
                            onEndReachedThreshold={50}
                            onEndReached={() => {this.loadMoreDataTwo()}}
                            enableEmptySections={true}
                            dataSource={this.state.dataSourceList.cloneWithRows(this.state.dataList)}
                            renderRow={(rowData)=>this.ListDataRowTwo(rowData)}/>
                    </View>
                </ScrollableTabView>
            </View>

        </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: Global.Const.transparent,
    },
});

